<!-- 使用 type="home" 属性设置首页，其他页面不需要设置，默认为page；推荐使用json5，更强大，且允许注释 -->
<route lang="json5" type="home">
{
needLogin:true,
"type": "mine",
style: {
navigationBarTitleText: '个人中心',
"navigationBarBackgroundColor": "#FFFFFF"
},
}
</route>
<template>
  <view style="background-color: #FFFFFF;padding-top: 80rpx;padding-bottom: 46rpx;display: flex;align-items: center;justify-content: space-between;padding-right: 26rpx">
    <view style="margin-left: 44rpx;display: flex;align-items: center">
      <wd-img v-if="userinfo.avatar" :width="52" :height="52"  round  :src="'/res'+userinfo.avatar" />
      <wd-img v-else :width="52" :height="52"  round  src="/static/images/default.png" />
      <view style="margin-left: 28rpx">
        <view v-text="userinfo.name" style="color: #333333;font-size: 34rpx"></view>
        <view v-text="userinfo.phone" style="color: #A0A7BA;font-size: 24rpx;margin-top: 8rpx"></view>
      </view>
    </view>
    <wd-icon name="arrow-right" size="20rpx" color="#A3A3A3"></wd-icon>
  </view>

  <view @click="toPassword" style="background-color: #FFFFFF;padding-top: 32rpx;padding-bottom: 32rpx;display: flex;align-items: center;justify-content: space-between;padding-right: 26rpx;margin-top: 14rpx">
    <view style="margin-left: 44rpx;display: flex;align-items: center">
      <image src="@/static/images/mine/password-icon.png" style="width: 36rpx;height: 36rpx;" mode="scaleToFill" />
      <view style="margin-left: 18rpx;color: #1A1A1A;font-size: 32rpx">
        修改密码
      </view>
    </view>
    <wd-icon name="arrow-right" size="20rpx" color="#A3A3A3"></wd-icon>
  </view>

  <view style="background-color: #FFFFFF">
    <view @click="toInfo" style="background-color: #FFFFFF;padding-top: 32rpx;padding-bottom: 32rpx;display: flex;align-items: center;justify-content: space-between;padding-right: 26rpx;margin-top: 14rpx">
      <view style="margin-left: 44rpx;display: flex;align-items: center">
        <image src="@/static/images/mine/info-icon.png" style="width: 36rpx;height: 36rpx;" mode="scaleToFill" />
        <view style="margin-left: 18rpx;color: #1A1A1A;font-size: 32rpx">
          信息反馈
        </view>
      </view>
      <wd-icon name="arrow-right" size="20rpx" color="#A3A3A3"></wd-icon>
    </view>
    <wd-divider custom-class="mine-line" color="#F6F6F6"></wd-divider>
    <view @click="toAbout" style="background-color: #FFFFFF;padding-top: 32rpx;padding-bottom: 32rpx;display: flex;align-items: center;justify-content: space-between;padding-right: 26rpx">
      <view style="margin-left: 44rpx;display: flex;align-items: center">
        <image src="@/static/images/mine/about-icon.png" style="width: 36rpx;height: 36rpx;" mode="scaleToFill" />
        <view style="margin-left: 18rpx;color: #1A1A1A;font-size: 32rpx">
          关于我们
        </view>
      </view>
      <wd-icon name="arrow-right" size="20rpx" color="#A3A3A3"></wd-icon>
    </view>
  </view>

  <view @click="logout" style="position: fixed;left: 0px;bottom: 106rpx;display: flex;justify-content: center;width: 100%">
    <view style="width: 460rpx;height: 86rpx;line-height: 86rpx;text-align: center;color: #FF0000;background-color: #FFFFFF;border-radius: 8rpx;border: 1rpx solid #D4D4D4">退出账户</view>
  </view>

</template>

<script lang="ts" setup>
import {useUserStore} from "@/store";

const userinfo = useUserStore().userInfo

const logout = () => {
  useUserStore().clearUserInfo()
  uni.navigateTo({
    url: '/pages/login/index'
  });
}
const toPassword = () => {
  uni.navigateTo({
    url: '/pages-sub/password/index'
  });
}

const toInfo = () => {
  uni.navigateTo({
    url: '/pages-sub/info/index'
  });
}
const toAbout = () => {
  uni.navigateTo({
    url: '/pages-sub/about/index'
  });
}
</script>

<style>
page {
  background-color: rgb(244,244,244);
}
.mine-line{
  padding: 0rpx !important;
  margin: 0rpx 0rpx !important;
}
</style>
